<template>
  <div class="sidebar">
    <el-tree
      :data="folderTree"
      :props="{ label: 'name' }"
      @node-click="handleNodeClick"
      default-expand-all
    >
      <template #default="{ node }">
        <span class="custom-tree-node">
          <el-icon><Folder /></el-icon>
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { Folder } from '@element-plus/icons-vue'
import type { OSSDirectory } from '../types'

defineProps<{
  folderTree: OSSDirectory[]
}>()

const emit = defineEmits<{
  (e: 'select', path: string): void
}>()

const handleNodeClick = (data: OSSDirectory) => {
  emit('select', data.path)
}
</script>

<style scoped lang="scss">
.sidebar {
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
  padding: 16px;
  overflow-y: auto;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-tree-node__content) {
  height: 32px;
}
</style> 